﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>加载动画</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>默认加载动画样式</h5>
			<p>
				<span class="loading-oneway"></span>
				<span class="loading-twoway"></span>
			</p>

			<hr class="hr" />

			<h5>带有颜色的加载动画样式</h5>
			<p>
				<span class="loading-oneway"></span>
				<span class="loading-oneway c-blue"></span>
				<span class="loading-oneway c-red"></span>
				<span class="loading-oneway c-orange"></span>
				<span class="loading-oneway c-green"></span>
				<span class="loading-oneway c-pink"></span>
				<span class="loading-oneway c-brown"></span>
				<span class="loading-oneway c-purple"></span>
				<span class="loading-oneway c-teal"></span>
				<span class="loading-oneway c-yellow"></span>
				<span class="loading-oneway c-violet"></span>
			</p>
			<p>
				<span class="loading-twoway"></span>
				<span class="loading-twoway c-blue"></span>
				<span class="loading-twoway c-red"></span>
				<span class="loading-twoway c-orange"></span>
				<span class="loading-twoway c-green"></span>
				<span class="loading-twoway c-pink"></span>
				<span class="loading-twoway c-brown"></span>
				<span class="loading-twoway c-purple"></span>
				<span class="loading-twoway c-teal"></span>
				<span class="loading-twoway c-yellow"></span>
				<span class="loading-twoway c-violet"></span>
			</p>

			<hr class="hr" />

			<h5>不同大小的加载动画样式</h5>
			<p>
				<span class="loading-oneway c-green" style="width: 2em; height: 2em;"></span>
				<span class="loading-oneway c-orange" style="width: 3em; height: 3em;"></span>
				<span class="loading-oneway c-yellow" style="width: 4em; height: 4em;"></span>
				<span class="loading-oneway c-blue" style="width: 5em; height: 5em;"></span>
				&nbsp;
				<span class="loading-twoway c-red" style="width: 28px; height: 28px;"></span>
				<span class="loading-twoway c-pink" style="width: 42px; height: 42px;"></span>
				<span class="loading-twoway c-purple" style="width: 56px; height: 56px;"></span>
				<span class="loading-twoway c-violet" style="width: 70px; height: 70px;"></span>
			</p>
		</div>
	</fieldset>

</body>
</html>
